<template>
  <div>
    <nav-bar title="人员统计">
    </nav-bar>
    <div class="maxinBox">
      <div class="plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              人数统计(单位:人)
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat" :options="chatData"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              在职人员年龄分布(单位:人)
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat1" :options="chatData1"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              退场原因统计(单位:人)
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat2" :options="chatData2"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              进/退场人员趋势(单位:人)
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat3" :options="chatData3"></my-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  var colorList = ['#FDD56A', '#73DDFF', '#8593FF'];
  var colorList1 = ['#FDA16A', '#FF8373', '#FF4040'];
  let data = {
    female: {
      name: '女性'
    },
    male: {
      name: '男性'
    }
  }
  let legendData = [data.female.name, data.male.name];
  import MyEcharts from '../../../../components/MyChart.vue'
  import personalManageAPI from '../../../../api/workAPI/personalManageAPI.js'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        ageList: [],
        womanList: [],
        manList: [],
        countList: [],
        nameList: [],
        chatData1: null,
        chatData: null,
        chatData2: null,
        chatData3: null
      }
    },
    methods: {
      getPersonStatistics() {
        let projectId = localStorage.getItem('projectId')
        personalManageAPI.getPersonStatistics(projectId).then(res => {
          this.ageList = res.ageList.map(item => {
            return item.categoryName
          })
          this.womanList = res.ageList.map(item => {
            return item.femaleCount
          })
          this.manList = res.ageList.map(item => {
            return item.maleCount
          })
          this.chatData1 = {
              tooltip: {
                  show: true,
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {
                  left: 'center',
                  top: 10,
                  formatter: (name) => {
                      if (name == data.female.name) {

                          return name
                      } else {
                          return name
                      }
                  },
                  data: legendData
              },
              grid: [{
                  right: '65%',
                  width: '15%',
                  containLabel: false,
                  bottom: 10,
                  top: 60,
              }, {
                  left: '50%',
                  width: 0,
                  top: 60,
                  bottom: 10
              }, {
                  left: '65%',
                  width: '25%',
                  containLabel: false,
                  bottom: 10,
                  top: 60,
              }],
              xAxis: [{
                  type: 'value',
                  inverse: true,
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      show: false,
                  },
                  splitLine: {
                      show: false,
                  },
              }, {
                  gridIndex: 1,
                  show: false
              }, {
                  gridIndex: 2,
                  type: 'value',
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      show: false,
                  },
                  splitLine: {
                      show: false,
                  },
              }],
              yAxis: [{
                      position: 'right',
                      axisLabel: {
                          show: false,
                          verticalAlign: 'top',
                          align: 'right',
                          padding: [-30, 10, 0, 0],
                          color: '#000',
                          // fontSize: 14,
                      },
                      axisLine: {
                          show: false
                      },
                      type: 'category',
                      inverse: false,
                      axisTick: {
                          show: false
                      },
                  },
                  {
                      gridIndex: 1,
                      position: 'center',
                      type: 'category',
                      inverse: true,
                      axisLabel: {
                          show: true,
                          margin: -25,
                          fontSize: 16,
                      },
                      axisTick: {
                          show: false,
                      },
                      axisLine: {
                          show: false,
                      },
                      data: this.ageList,
                  },
                  {
                      gridIndex: 2,
                      position: 'left',
                      axisLabel: {
                          show: false,
                          align: 'left',
                          verticalAlign: 'top',
                          margin: 0,
                          padding: [-30, 0, 0, 0],
                          color: `#000`,
                          fontSize: 14,
                      },
                      axisLine: {
                          show: false
                      },
                      type: 'category',
                      inverse: false,
                      axisTick: {
                          show: false
                      },
                  }
              ],
              series: [{
                      name: legendData[0],
                      type: 'bar',
                      barWidth: 20,
                      label: {
                          show: true,
                          fontFamily: 'Rubik-Medium',
                          fontSize: 14,
                          distance: 10,
                          color: '#FF7BDB',
                          position: 'left'
                      },
                      itemStyle: {
                          color: '#FF7BDB',
                      },
                      data: this.womanList
                  },
                  {
                      type: 'bar',
                      barWidth: 20,
                      label: {
                          show: true,
                          fontFamily: 'Rubik-Medium',
                          fontSize: 14,
                          distance: 10,
                          position: 'right'
                      },
                      xAxisIndex: 2,
                      yAxisIndex: 2,
                      name: legendData[1],
                      itemStyle: {
                          color: '#599FFF',
                      },
                      data: this.manList
                  },
              ]
          }

          this.countList = res.countList.map(item => {
            return {
              name: item.categoryName,
              value: item.count
            }
          })
          this.nameList = res.countList.map(item => {
            return item.categoryName
          })
          this.chatData = {
              title: {
                text: '',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 20
                }
              },
              legend: {
                  left: 'center',
                  data: this.nameList
              },
              tooltip: {
                trigger: 'item'
              },
              series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['24%', '35%'],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 15,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{c}人',
                    rich: {
                        hr: {
                            backgroundColor: 't',
                            borderRadius: 3,
                            width: 3,
                            height: 3,
                            padding: [3, 3, 0, -12]
                        },
                        a: {
                            padding: [-30, 15, -20, 15]
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 20,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: this.countList,
              }]
          }

          this.exitList = res.bowOutCategoryList.map(item => {
            return {
              name: item.categoryName,
              value: item.count
            }
          })

          this.chatData2 = {
              title: {
                text: '',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 20
                }
              },
              tooltip: {
                trigger: 'item'
              },
              series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['24%', '35%'],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 15,
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorList1[params.dataIndex]
                        }
                    }
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{a|{b}：{d}%}\n{hr|}',
                    rich: {
                        hr: {
                            backgroundColor: 't',
                            borderRadius: 3,
                            width: 3,
                            height: 3,
                            padding: [3, 3, 0, -12]
                        },
                        a: {
                            padding: [-30, 15, -20, 15]
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 20,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: this.exitList,
              }]
          }

          this.dateList = res.entryCountList.map(item => {
            return item.date
          })
          this.entryList = res.entryCountList.map(item => {
            return item.count
          })
          this.bowList = res.bowOutCountList.map(item => {
            return item.count
          })
          this.chatData3 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['进场人员', '退场人员']
            },
            grid: {
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.dateList
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '进场人员',
                    type: 'line',
                    stack: '总量',
                    data: this.entryList
                },
                {
                    name: '退场人员',
                    type: 'line',
                    stack: '总量',
                    data: this.bowList
                }
            ]
        };
        })
      }
    },
    mounted() {
      this.getPersonStatistics()
    }
  }
</script>

<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
